<template>
	<view class="container">
		<view class="time">
			<view class="tit">
				<text>起始时间</text>
				<!-- <view>
					<text>{{start_time}}</text>
				</view> -->
				<view class="uni-list-cell-db">
					<picker mode="date" :value="start_time" @change="bindDateChange">
						<view class="uni-input">{{start_time}}</view>
					</picker>
				</view>
			</view>
			<view class="tit">
				<text>结束时间</text>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="start_time" @change="bindDateChange1">
						<view class="uni-input">{{end_time}}</view>
					</picker>
				</view>
			</view>
			<view class="tit" @click="popup">
				<text>选择机柜</text>
				<view>
					<text>{{name}}</text>
				</view>
			</view>

			<view class="search" @click="search('')">
				<text>查询</text>
			</view>

		</view>

		<view class="content" v-if="info">
			<view class="con_top">
				<view class="item">
					<text>使用记录(次)</text>
					<text class="use top">{{use}}</text>
				</view>
				<!-- <view class="item">
					<text>电量总计(度)</text>
					<text class="electric top">{{electric}}</text>
				</view> -->
				<view class="item">
					<text>消费总计(元)</text>
					<text class="money top">{{money}}</text>
				</view>
			</view>
			<scroll-view class="list" v-if="useLog.length!=0" scroll-y="true" @scrolltolower="loadMore">
				<view class="list_item" v-for="(item,index) in useLog" :key="item.id">
					<view>
						<text>{{item.nickname}}</text>
						<text class="electric">+ {{item.money}}</text>
					</view>
					<view>
						<text class="qian">{{item.createtime_text}}</text>
						<!-- <text>耗电：<text class="electric">{{item.dushu}} </text> 度</text> -->
					</view>
				</view>
			</scroll-view>
			<view class="empty" v-else>
				暂无使用记录
			</view>
		</view>


		<view class="mask" v-if="operation">
			<view class="operation">
				<view class="radio" v-for="(item,index) in list" :key="item.id">
					<radio value="r1" :checked="item.isCheck" color="#34ACEF" @click="radio(index)" />
					<text @click="radio(index)">{{item.name}}</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mentList,
		useList
	} from '../../api/api.js'
	export default {
		data() {
			return {
				start_time: '-',
				end_time: '-',
				name: '全部',
				device_id: 0,
				operation: false,
				info: false,
				use: 0,
				electric: 0,
				money: 0,
				list: [],
				useLog: [],
				total: 0,
				last_page: 1,
				current_page: 1,
				per_page: 10
			}
		},
		onLoad() {
			this.getMentList()
		},
		methods: {
			popup() {
				this.operation = true
			},
			getMentList() {
				mentList().then(res => {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].isCheck = false
					}
					this.list = res.data
					this.list.unshift({
						device_id: 0,
						name: '全部',
						isCheck: true
					})
				})
			},
			bindDateChange: function(e) {
				this.start_time = e.target.value
			},
			bindDateChange1: function(e) {
				this.end_time = e.target.value
			},
			radio(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isCheck = false
				}
				this.list[index].isCheck = true
				this.device_id = this.list[index].device_id
				this.name = this.list[index].name
				this.operation = false
			},
			loadMore(e) {
				if (this.current_page < this.last_page) {
					this.current_page += 1
					this.search('loadMore')
				}
			},
			search(loadMore) {
				if (this.start_time == '-') {
					uni.showToast({
						icon: 'none',
						title: '请选择开始时间'
					})
					return
				}
				if (this.end_time == '-') {
					uni.showToast({
						icon: 'none',
						title: '请选择结束时间'
					})
					return
				}
				useList({
					start_time: this.start_time,
					end_time: this.end_time,
					device_id: this.device_id,
					limit: this.per_page,
					page: this.current_page
				}).then(res => {
					if (res.code == 1) {
						if (loadMore) {
							for (let i = 0; i < res.data.data.length; i++) {
								this.useLog.push(res.data.data[i])
							}
						} else {
							this.useLog = res.data.data
						}
						this.use = res.data.use_num
						this.electric = res.data.dianliang
						this.money = res.data.xiaofei
						this.total = res.data.total
						this.last_page = res.data.last_page
						this.use_count = res.data.use_count
						this.info = true
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.time {
		width: 100%;
		padding: 30upx 0;
		background-color: #FFFFFF;

		.tit {
			width: calc(100% - 60upx);
			height: 100upx;
			background-color: #FFFFFF;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10upx;

			text {
				font-size: 28upx;
			}

			view {
				width: 70%;
				height: 80upx;
				border-radius: 10upx;
				border: 1upx solid #69aacf;
				display: flex;
				justify-content: center;
				align-items: center;

				picker {
					width: 100%;


					view {
						width: 100%;
						border: 0;
					}
				}

			}

		}

		.search {
			width: 90%;
			height: 90upx;
			margin: 30upx auto;
			background-color: #3eb9ff;
			border-radius: 50upx;
			color: #FFFFFF;
			line-height: 90upx;
			text-align: center;
		}

	}

	.content {
		width: 100%;
		margin-top: 30upx;
		background-color: #FFFFFF;

		.con_top {
			width: 100%;
			display: flex;
			// justify-content: space-between;
			border-bottom: 1upx solid #f9f9f9;

			.item {
				width: 50%;
				height: 120upx;
				font-size: 28upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;


				.top {
					margin-top: 10upx;
				}

				.use {
					color: #80b8da;
				}

				.electric {
					color: #64c4b2;
				}

				.money {
					color: #d99895;
				}
			}
		}

		.list {
			width: 100%;
			height: calc(100% - 670upx);

			.list_item {
				width: calc(100% - 60upx);
				padding: 0 30upx;
				border-bottom: 1upx solid #f9f9f9;
				font-size: 28upx;

				view {
					width: 100%;
					height: 60upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.electric {
						color: #64c4b2;
					}

					.qian {
						color: #999;
					}

				}

			}
		}
		
		.empty{
			width: 100%;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			background-color: #f6f6f6;
		}
	}


	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.operation {
			width: 580upx;
			min-height: 200upx;
			padding: 10upx 30upx;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;

			.radio {
				height: 60upx;
				margin-top: 30upx;
				font-size: 32upx;
				color: #666;

				radio {
					transform: scale(0.8);
					margin: 0 20upx;
				}
			}
		}
	}
</style>
